<template>
  <div>
    <!-- 质量指数 -->
    <Echart :options="options" id="bottomLeftChart" style="height: 7.5rem;width: 12rem"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  // 监视数据，数据更新时刷新
  watch: {
    cdata: {
      // 接受数据处理
      handler (newData) {
        // 标题
        this.options = {
          title: {
            text: "版本质量",
            textStyle:{
                color:"#CCFFFF",
                fontSize:this.refontSize(18)
            },
            textAlign:"auto"

          },
          // 提示
          tooltip: {
            // show:false,
            // trigger: "item",
            trigger: "axis",
            // extraCssText:'width:100px;height:60px;',
            extraCssText:'width:8rem;white-space:pre-wrap;',
            // backgroundColor: "rgba(255,255,255,0.5)",
            axisPointer: {
              type: "shadow",
              // type: 'cross',
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            },
            // 自定义提示内容与上下箭头
            formatter(params){
              // console.log(params)
              var data = params[2].data
              data = data[1]
              var datapre = params[3].data
              datapre = datapre[1]
              var qdata = params[0].data
              qdata = qdata[1]
              // console.log(qdata)
              // 比对当前版本与前个版本数据，当前版本大于前版本，上箭头红色，小于下箭头绿色，相等-
              if(datapre==0)
              return(
                  "当前版本质量:"+qdata.toFixed(4)+"<br/>"+
                "&nbsp&nbsp&nbsp功能完成率："+ data["功能完成率"].toFixed(2)+"<br/>"+"&nbsp&nbsp&nbsp功能符合率:"+data["功能符合率"].toFixed(2)+"<br/>"+
                "&nbsp&nbsp&nbsp用例通过率:"+data["用例通过率"].toFixed(2)+"<br/>"+"&nbsp&nbsp&nbsp用例执行率:"+data["用例执行率"].toFixed(2)+"<br/>"+
                "&nbsp&nbsp&nbspBug修复率:"+data["Bug修复率"].toFixed(2)+"<br/>"+"&nbsp&nbsp&nbspBug趋势:"+data["Bug趋势"].toFixed(2)+"<br/>"+
                "&nbsp&nbsp&nbsp关键性能通过率:"+data["关键性能通过率"].toFixed(2)+"<br/>"+"&nbsp&nbsp&nbspMajor以上20天未决:"+data["Major以上20天未决Bug"]+"<br/>"+
                "&nbsp&nbsp&nbspBug renew数:"+data["bugRenew"]+"<br/>"+"&nbsp&nbsp&nbspBug reopen数:"+data["bugReopen"]+"<br/>"+"&nbsp&nbsp&nbsp风险系数:"+data["风险系数"]+"<br/>"
            );
              else{
                var returndata="当前版本质量:"+qdata.toFixed(4)+"<br/>"
                var i = 0
                for(var key in data){
                  if(key!="submitTime" &&key!="风险") {
                    i += 1
                    if(i%2==0)
                      if (data[key] > datapre[key])
                        returndata += "&nbsp&nbsp&nbsp" + key + "：" + data[key].toFixed(2) + "&nbsp&nbsp&nbsp" + '<span style="color:#FF0000">↑</span>' + "<br/>"
                      else if(data[key] == datapre[key])
                        returndata += "&nbsp&nbsp&nbsp" + key + "：" + data[key].toFixed(2) + "&nbsp&nbsp&nbsp" + '<span style="color:#FFFFFF">-</span>' + "<br/>"
                      else{
                        returndata += "&nbsp&nbsp&nbsp" + key + "：" + data[key].toFixed(2) + "&nbsp&nbsp&nbsp" + '<span style="color:#00FF00">↓</span>' + "<br/>"
                    }
                    else{
                      if (data[key] > datapre[key])
                        returndata += "&nbsp&nbsp&nbsp" + key + "：" + data[key].toFixed(2) + "&nbsp&nbsp&nbsp" + '<span style="color:#FF0000">↑</span>' + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"
                      else if(data[key] == datapre[key])
                        returndata += "&nbsp&nbsp&nbsp" + key + "：" + data[key].toFixed(2) + "&nbsp&nbsp&nbsp" + '<span style="color:#FFFFFF">-</span>' + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"
                      else{
                        returndata += "&nbsp&nbsp&nbsp" + key + "：" + data[key].toFixed(2) + "&nbsp&nbsp&nbsp" + '<span style="color:#00FF00">↓</span>' + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"
                    }
                    }
                  }
                }
                returndata+="&nbsp&nbsp&nbsp"+'<span style="color:#FF0000;word-wrap:break-word;">'+data["风险"]+'</span>'
                return(returndata)
              }
            },
          },
          // 表头
          // legend: {
          //   data: ["质量指数"],
          //   textStyle: {
          //     color: "#B4B4B4",
          //     fontSize:this.refontSize(16),
          //   },
          //   // top: "5%"
          // },
          // 周边间距
          grid: {
            x: "6%",
            width: this.refontSize(810),
            height: this.refontSize(475),
            y: "8%",
            // x2:"13%",
            // y2:"15%",
          },
          // x轴设置
          xAxis: [
            {
            // data: newData.category,
            type:'time',
            boundaryGap:false,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                // show:false,
                // color: "#B4B4B4"
                color: "#FFFFFF"
              },
            },
            // nameGap:-15,
            axisTick: {
              show: false
            },
            name:"日期",
            nameLocation:"start",
            // rotate:40,
            nameTextStyle:{
              padding:-this.refontSize(12),
              fontSize:this.refontSize(16),
              color:"#CCFFFF",
            },
            axisLabel:{
              color:"#CCFFFF",
              formatter: function (value) {
                  // 格式化成月/日，只在第一个刻度显示年份
                  // console.log(value)
                  var date = new Date(value);
                  var texts = [(date.getMonth() + 1), date.getDate()];
                  // if (index === 0) {
                  //     texts.unshift(date.getYear());
                  // }
                  return texts.join('-');
              },
              margin:-this.refontSize(50),
              fontSize:this.refontSize(14),
              // rotate:40
              }
          },
            {
              // data: newData.category,
              type:'category',
              show:false,
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                },
              },
              // nameGap:-15,
              axisTick: {
                show: false
              },
              name:"版本号",
              nameLocation:"start",
              // rotate:40,
              nameTextStyle:{
                padding:-this.refontSize(20),
                fontSize:this.refontSize(16),
                color:"#CCFFFF",
              },
              axisLabel:{
                color:"#CCFFFF",
                margin:-this.refontSize(40),
                fontSize:this.refontSize(14),
                rotate:40
              }
            },],
          // y轴设置
          yAxis: [
            {
              splitLine: { show: false },
              // offset:100,
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              max:1,
              min: -0.2,
              interval:0.2,
              axisLabel: {
                formatter: "{value} "
              },
              show:false
            },
            {
              splitLine: { show: false },
              name:"质量指数",
              offset:this.refontSize(5),
              // grid: {
              //   // x: this.dataType === 'forecast' ? 80 : 60,
              //   y: 50,
              //   // x2: this.dataType === 'forecast' ? 80 : 50,
              //   y2: 150,
              //   containLabel: true
              // },
              // nameLocation:"start",
              // rotate:40
              nameTextStyle:{
                // padding:-20,
                fontSize:this.refontSize(14),
                color:"#CCFFFF",
              },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              max:1,
              min: -0.2,
              interval:0.2,
              axisLabel: {
                formatter: "{value} ",
                color:"#CCFFFF",
                // margin:-30,
                fontSize:this.refontSize(14)
              },
            }
          ],
          // 数据
          series: [
              // 曲线
            {
              name: "质量指数",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: this.refontSize(8),
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#F02FC2"
                }
              },
              // 准入准出线
              markLine: {
                symbol: ['none', 'none'],//去掉箭头
                lineStyle: {
                  type: 'solid',
                  color:{//设置渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: 'red '// 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
                },
                 data: [
                     {
                            yAxis : 1,
                            label: { 
                  show: true, 
                  position:'middle',
                  formatter:"准出线",
                  color:'#CCFFFF',
                  fontSize:this.refontSize(14)
                  },
                            // yAxis : 0.2,
                      },{
                            yAxis : 0.1,
                            label: { 
                  show: true, 
                  position:'middle',
                  formatter:"准入线",
                  color:'#CCFFFF',
                  fontSize:this.refontSize(14)
                  },
                            // yAxis : 0.2,
                      },]
                  },
              
              data: newData.rateData
            },
             // 柱状图
            {
              // name: "已贯通",
              type: "bar",
              barWidth: this.refontSize(10),
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  barBorderRadius: this.refontSize(5),
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" }
                  ])
                }
              },
              data: newData.barData
            },
            //  不显示，用于接收当前版本提示数据
            {
              // name: "质量",
              type: "line",
              // smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              // symbolSize: this.refontSize(8),
              // xAxisIndex: 0,
              yAxisIndex: 0,
              // itemStyle: {
              //   normal: {
              //     color: "#F02FC2"
              //   }
              // },
              // data: newData.rateData
              data: newData.alldata
            },
            //  不显示，用于接收上一版本提示数据
            {
              // name: "质量",
              type: "line",
              // smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              // symbolSize: this.refontSize(8),
              // xAxisIndex: 1,
              yAxisIndex: 0,
              // itemStyle: {
              //   normal: {
              //     color: "#F02FC2"
              //   }
              // },
              data: newData.alldatapre
              // data: newData.rateData
            },
          ]
        }
      },
      immediate: true,
      deep: true
    },
  },
}
</script>